<template>
  <div class="import section" v-if="type === 'import'">
    <div class="import-wrap">
      <div class="group">
        <div class="label">付款明细模板：</div>
        <div class="control">
          <el-button type="text" @click="downloadfile('/company/money_import/template')">点击下载模板</el-button>
        </div>
      </div>
      <div class="group">
        <div class="label">导入付款明细：</div>
        <div class="control">
          <el-upload
            class="upload-doc"
            ref="upload"
            :data="{date: date, is_tax: hasTax, money_input: moneyIncome}"
            :action="'/company/money_import/parser'"
            :headers="{ token: userInfo.token }"
            :on-change="handleFileChange"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :file-list="fileList"
            :show-file-list="false"
            :auto-upload="false">
            <div slot="trigger">
              <el-button size="mini" type="primary">浏览</el-button>
              <span style="margin-left: 10px;">{{fileName}}</span>
            </div>
          </el-upload>
        </div>
      </div>
      <div class="group">
        <div class="label">结算周期：</div>
        <div class="control">
          <el-date-picker
            style="width: 220px"
            v-model="date"
            type="date"
            value-format="yyyyMMdd"
            format="yyyyMMdd"
            placeholder="请输入结算周期"
          ></el-date-picker>
        </div>
      </div>
      <div class="group">
        <div class="label">支付金额：</div>
        <div class="control">
          <el-input style="width: 220px" v-model="moneyIncome" placeholder="请输入支付金额"></el-input>
        </div>
      </div>
      <!-- <div class="group">
        <div class="label">是否含税：</div>
        <div class="control">
          <el-radio-group v-model="hasTax">
            <el-radio label="1">是</el-radio>
            <el-radio disabled label="0">否</el-radio>
          </el-radio-group>
        </div>
      </div> -->
      <el-button :loading="isLoading" class="submit" type="primary" size="small" @click="uploadFile()">提交</el-button>
      <div class="desc">
        <div class="title">使用说明:</div>
        <p class="danger-text">1. 下载的模板中, 表头信息请勿改动;</p>
        <p class="danger-text">2. 上传的模板文件名请改成"登陆名.xlsx"再上传，系统会校验企业信息避免错误;</p>
        <p class="danger-text">3. 模板中的 结款周期, 正确格式为: 20190628(年月日);</p>
        <p class="danger-text">4. 上传时请检查,要上传的文件中是否存在科学计数法(如:2.01709E+15),或其他不正常显示的数据,以免造成不必要的损失;</p>
        <p class="danger-text">5. 上传的数据中,请注意金额是否正确</p>
        <p class="danger-text">6. 如果上传的信息中有长数字串,请将 excle 设置成文本格式;</p>
      </div>
    </div>
  </div>
  <validate :headData="headData" :tableData="tableData" v-else @cancel="handleCancel()"></validate>
</template>
<script>
import { mapGetters } from 'vuex'
import validate from './validate'
export default {
  name: 'importdata',
  components: {
    validate
  },
  data() {
    return {
      fileName: '',
      type: 'import',
      fileList: [],
      headData: [],
      tableData: [],
      date: '',
      hasTax: '1',
      moneyIncome: '',
      isLoading: false
    }
  },
  computed:{
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    handleCancel() {
      this.type = 'import'
      this.fileList = []
      this.$nextTick(() => {
        this.fileName = ''
      })
    },
    downloadfile(url) {
      this.$http.get(url, {}, {
        responseType: 'blob'
      }).then(res => {
        let blob = new Blob([res])
        let reader = new FileReader()
        reader.readAsDataURL(blob)
        reader.onload = (e) => {
          let a = document.createElement('a')
          a.download = '交易导入模板.xlsx'
          a.href = e.target.result
          document.body.appendChild(a)
          a.click()
          a.remove()
        }
      })
    },
    handleFileChange(file) {
      this.fileName = file.name
    },
    handleUploadError() {
      this.isLoading = false
      this.fileList = []
      this.$nextTick(() => {
        this.fileName = ''
      })
    },
    handleUploadSuccess(res) {
      if (res.code === 200) {
        this.type = 'valid'
        this.headData = res.data.header
        this.tableData = res.data.list
      } else {
        this.$message.error(res.message || res.msg)
      }
      this.isLoading = false
      this.fileList = []
      this.$nextTick(() => {
        this.fileName = ''
      })
    },
    uploadFile() {
      if (!this.fileName) {
        this.$message.warning('请选择文件')
        return false
      }
      this.isLoading = true
      this.$refs['upload'].submit()
    }
  }
}
</script>
<style lang="less" scoped>
.import-wrap {
  width: 600px;
  margin: 50px auto;
  .group {
    display: flex;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    .label {
      width: 120px;
      font-weight: bold;
    }
    .control {
      flex: 1;
    }
  }
  .submit {
    margin-top: 20px;
    width: 100px;
  }
  .desc {
    margin-top: 50px;
    .title {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    p {
      font-size: 14px;
      margin: 0;
      line-height: 30px;
    }
  }
}
</style>
